<template>
  <div class="map-box">
    <div id="map">
      <!-- <div id="info1"></div> -->
      <div class="textpop" v-show="popShow" v-bind:style="{top:popX+'px',left:popY+'px'}">
        <div>{{describe}}</div>
      </div>
      <div class="databtn">
        <button v-on:click="dataChange">新数据</button>
      </div>
    </div>
    <!-- <div id="info"></div> -->
  </div>
</template>

<script>
import Mapbox from "mapbox-gl";

import {
  ScatterplotLayer,
  IconLayer,
  LineLayer,
  PathLayer,
  PolygonLayer,
  GeoJsonLayer
} from "@deck.gl/layers";
import { MapboxLayer } from "@deck.gl/mapbox";
import MapboxLanguage from "@mapbox/mapbox-gl-language";
import { type } from "os";

var map, popup, geojson0, geojson1;

const scatterJson = [
  {
    position: [121.52760990726458, 31.219358305273758],
    message: '这是1号楼'
  },
  {
    position: [121.52875562478451, 31.219218332993673],
    message: '这是2号楼'
  }
]

//deck散点标记
const myDeckLayer = new MapboxLayer({
  id: "my-scatterplot",
  type: ScatterplotLayer,
  data: [{ position: [121.5286, 31.2186], size: 5, message: "Hover over me" }],
  stroked: true,
  filled: true,
  pickable: true,
  getPosition: d => d.position,
  getRadius: d => d.size,
  getFillColor: d => [255, 140, 0],
  getLineColor: d => [0, 0, 0],
  lineWidthMinPixels: 1,
  onHover: () => {

  }
});

const ICON_MAPPING = {
  camera: { x: 0, y: 0, width: 64, height: 64 },
  file: { x: 64, y: 0, width: 64, height: 64 },
  location: { x: 128, y: 0, width: 64, height: 64 },
  picture: { x: 256, y: 0, width: 64, height: 64 }
};

//deck图标标记
const dkIconLayer = new MapboxLayer({
  id: "icon-layer",
  type: IconLayer,
  data: [
    {
      coordinates: [121.5275202626963, 31.219718576880762],
      size: 5,
      name: "camera"
    },
    {
      coordinates: [121.5253237352661, 31.21927335709588],
      size: 5,
      name: "location"
    }
  ],
  pickable: true,
  iconAtlas: require("../assets/icon-layer.png"),
  iconMapping: ICON_MAPPING,
  sizeScale: 15,
  getPosition: d => d.coordinates,
  getSize: d => d.size,
  getIcon: d => d.name
});

//deck线图层
const dkLineLayer = new MapboxLayer({
  id: "line-layer",
  type: LineLayer,
  data: [
    {
      from: {
        name: "1号楼",
        coordinates: [121.52760990726458, 31.219358305273758]
      },
      to: {
        name: "2号楼",
        coordinates: [121.52875562478451, 31.219218332993673]
      }
    }
  ],
  getSourcePosition: d => d.from.coordinates,
  getTargetPosition: d => d.to.coordinates
});

//deck路径图层
const dkpathlayer = new MapboxLayer({
  id: "path-layer",
  type: PathLayer,
  data: [
    {
      path: [
        [121.52760990726458, 31.219358305273758],
        [121.52875562478451, 31.219218332993673]
      ]
    }
  ],
  widthScale: 5,
  widthMinPixels: 2
});

//deck多边形图层
const dkpolygonLayer = new MapboxLayer({
  id: "polygon-layer",
  type: PolygonLayer,
  data: [
    {
      contour: [
        [
          [121.52137179756141, 31.2153298410133],
          [121.5366282024388, 31.2153298410133],
          [121.5366282024388, 31.222670016505333],
          [121.52137179756141, 31.222670016505333],
          [121.52137179756141, 31.2153298410133]
        ],
        [
          [121.525057, 31.221018],
          [121.528082, 31.221541],
          [121.531462, 31.220339],
          [121.529981, 31.216586],
          [121.524767, 31.216614],
          [121.525057, 31.221018]
        ]
      ]
    }
  ],
  getPolygon: d => d.contour,
  getFillColor: d => [0, 0, 0, 200]
});

//deck-geoJson图层
//--散点图
const pointsJson = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {
        description: "这是1号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52760990726458, 31.219358305273758]
      },
      id: "1b4052fd-7fd4-4f80-9c9f-bcf5862f8e1c"
    },
    {
      type: "Feature",
      properties: {
        description: "这是2号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52875562478451, 31.219218332993673]
      },
      id: "0f04e923-c465-4050-bc78-e68f7052ab74"
    },
    {
      type: "Feature",
      properties: {
        description: "这是8号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.5285763628595, 31.220331440158212]
      },
      id: "f63cd86a-234a-4062-be4b-73d5b550bca6"
    },
    {
      type: "Feature",
      properties: {
        description: "这是3号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52983899033053, 31.21887839945073]
      },
      id: "1af2bb24-572c-456d-8f67-0ff56e5c9c4f"
    },
    {
      type: "Feature",
      properties: {
        description: "这是4号楼"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52701756351293, 31.219844873968245]
      },
      id: "ab1241e6-5c25-4180-8ed7-a24f206e9020"
    }
  ]
};

const pointsNew = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {
        description: "<div>这是1号楼啊</div>"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52760990726458, 31.219358305273758]
      },
      id: "1b4052fd-7fd4-4f80-9c9f-bcf5862f8e1c"
    },
    {
      type: "Feature",
      properties: {
        description: "<div>这是2号楼啊</div>"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52875562478451, 31.219218332993673]
      },
      id: "0f04e923-c465-4050-bc78-e68f7052ab74"
    },
    {
      type: "Feature",
      properties: {
        description: "<div>这是8号楼啊</div>"
      },
      geometry: {
        type: "Point",
        coordinates: [121.5285763628595, 31.220331440158212]
      },
      id: "f63cd86a-234a-4062-be4b-73d5b550bca6"
    },
    {
      type: "Feature",
      properties: {
        description: "<div>这是3号楼啊</div>"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52983899033053, 31.21887839945073]
      },
      id: "1af2bb24-572c-456d-8f67-0ff56e5c9c4f"
    },
    {
      type: "Feature",
      properties: {
        description: "<div>这是4号楼啊</div>"
      },
      geometry: {
        type: "Point",
        coordinates: [121.52701756351293, 31.219844873968245]
      },
      id: "ab1241e6-5c25-4180-8ed7-a24f206e9020"
    }
  ]
};


export default {
  components: {
  },

  created() {

  },
  methods: {
    handleHover({ object, x, y }) {
      //mapbox-popup
      // if (!object) {
      //   popup.remove();
      //   return;
      // }
      // const description = object["properties"]["description"];
      // const coordinates = object.geometry.coordinates.slice();
      // popup
      //   .setHTML(description)
      //   .setLngLat(coordinates)
      //   .addTo(map);

      //自定义popup
      if (!object) {
        this.popShow = false
      } else {
        this.popShow = true;
        this.describe = object["message"];
        this.popX = y;
        this.popY = x;
      }
    },
    handleClick({ object, x, y }) {
      if (!object) {
        this.popShow = false
      } else {
        this.popShow = true;
        this.describe = object["properties"]["description"];
        this.popX = y;
        this.popY = x;
      }
    },
    init() {
      Mapbox.accessToken =
        "pk.eyJ1IjoiamltbXkwMDkiLCJhIjoiY2swNHl2M3owMGl2bzNja2F3emk0OWxvaiJ9.cIYfwmmCkLoyQseAEI6UzQ";
      map = new Mapbox.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v9", //outdoors-v10 satellite-streets-v9
        center: [121.529, 31.219],
        zoom: 16,
        minZoom: 16,
        trackResize: true,
        // dragPan: false,
        dragRotate: false,
        scrollZoom: { around: "center" },
        maxBounds: [
          [121.52137179756141, 31.2153298410133],
          [121.5366282024388, 31.222670016505333]
        ],
        logoPosition: 'bottom-left'
      });

      popup = new Mapbox.Popup({
        closeButton: false,
        closeOnClick: false,
        className: "text-pop"
      });

      geojson0 = new MapboxLayer({
        id: "geojson0",
        type: GeoJsonLayer,
        data: pointsJson,
        pickable: true,
        stroked: false,
        filled: true,
        getFillColor: [255, 0, 0, 255],
        getRadius: 3,
        getLineWidth: 0,
        onHover: this.handleHover.bind(this),
        // onClick: this.handleClick.bind(this)
      });

      geojson1 = new MapboxLayer({
        id: "geojson1",
        type: ScatterplotLayer,
        data: scatterJson,
        stroked: true,
        filled: true,
        pickable: true,
        getPosition: d => d.position,
        getRadius: d => 3,
        getFillColor: [255, 0, 0, 255],
        getLineColor: [0, 0, 0, 0],
        lineWidthMinPixels: 1,
        onHover: this.handleHover.bind(this)
      })

      map.on("load", () => {
        map.addLayer(dkIconLayer);
        map.addLayer(dkLineLayer);
        // map.addLayer(dkpathlayer);
        map.addLayer(dkpolygonLayer);
        map.addLayer(geojson1);

        console.log(map.getBounds());
      });

      // map.on("mousemove", e => {
      //   document.getElementById(
      //     "info1"
      //   ).innerHTML =
      //     JSON.stringify(
      //       e.lngLat
      //     );
      // });

      // 设置语言
      var language = new MapboxLanguage({ defaultLanguage: "zh" });
      map.addControl(language);
    },
    dataChange() {
      this.mapdata = {
        id: "geojson0",
        type: "geojson",
        data: pointsNew
      };
    },
  },
  data() {
    return {
      popShow: false,
      popX: 0,
      popY: 0,
      describe: '',
      mapdata: {
        id: "geojson0",
        type: "geojson",
        data: pointsJson
      }
    };
  },
  mounted() {
    this.init();
  },
  computed: {

  },

  watch: {
    mapdata: {
      deep: true,
      handler(newVal, oldVal) {
        geojson0.setProps({
          data: newVal.data,
          getFillColor: [0, 0, 255, 255],
        });
      }
    }
  },
};
</script>

<style>
.map-box {
  height: 100%;
  width: 100%;
}
#map {
  height: 100%;
  position: relative;
}

#info1 {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 1;
}

.databtn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.textpop {
  background-color: rgba(0, 0, 0, 0.6);
  color: #f6f6f6;
  font-size: 12px;
  text-align: center;
  width: 100px;
  border-radius: 6px;
  padding: 10px 5px;
  position: fixed;
  /* top: 10px;
  left: 10px; */
  z-index: 1;
}
</style>